<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <div id="main" style="height:350px"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-table v-loading="loading" :data="reportInfoList">
        <el-table-column label="项目名称" align="center" prop="projectName" width="300px;"/>
        <el-table-column label="建设单位" align="center" prop="buildUnit" width="250px;" />
        <el-table-column label="施工单位" align="center" prop="construnctionUnit" width="250px;"/>
        <el-table-column label="施工路段">
          <el-table-column label="施工开始路段" align="center" prop="expresswayStartSectionName" />
          <el-table-column label="施工结束路段" align="center" prop="expresswayEndSectionName"/>
        </el-table-column>

        <el-table-column label="施工日期">
          <el-table-column label="起" align="center" prop="construnctionStartTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.construnctionStartTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="止" align="center" prop="construnctionEndTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.construnctionEndTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="审核状态" align="center" prop="reportStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.reportStatus == 0" style="color: #FFB009">草稿</span>
            <span v-if="scope.row.reportStatus == 1" style="color: #0089FF">待接收</span>
            <span v-if="scope.row.reportStatus == 2" style="color: #59DD34">通过</span>
            <span v-if="scope.row.reportStatus == 3" style="color: #FF0000">驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="所属管辖大队" align="center" prop="deptName"/>
        <el-table-column label="审核人" align="center" prop="reviewedByName" />
        <el-table-column label="创建人" align="center" prop="updateByName" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import { selectProjectReportTotal } from "@/api/statistics/reportForms";
  import { listreportInfo} from "@/api/check/reportInfo";

  export default {
    name:"ProjectReportingStatistics",
    dicts: ['business_cons_direction_type', 'business_cons_type'],
    data(){
      return{
        // 遮罩层
        loading: true,
        charData:[],

        // 撤场上报表格数据
        reportInfoList: [],

        // 总条数
        total: 0,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
      }
    },

    mounted(){
      this.getProjectReportTotal();
      this.getList();
    },

    methods:{
      /** 查询施工报备信息列表 */
      getProjectReportTotal() {
        this.loading = true;
        selectProjectReportTotal({}).then(response => {
          this.charData = response.data;
          this.initChar();
          this.loading = false;
        });
      },

      initChar(){
        //使用mounted的目的是为了等页面元素渲染之后再触发
        var chartDom = document.getElementById('main');//main 中放了一个折线图和柱状图
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          legend: {},
          tooltip: {},
          dataset: {
            source: this.charData,
          },
          xAxis: { type: 'category' },
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        };
        myChart.setOption(option);
      },

      /** 查询撤场上报列表 */
      getList() {
        this.loading = true;
        listreportInfo(this.queryParams).then(response => {
          this.reportInfoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
    }
  }
</script>

